<script setup>

</script>

<template>
  <div class="content">
    <div class="servic">
      <p>选择服务类型</p>
      <div>
        <div>通话</div>
        <div>文字</div>
      </div>
    </div>
    <div class="topic">
      <p>话题分类</p>
      <div>
        <div>不限</div>
        <div>情感问题</div>
        <div>摆脱单身</div>
        <div>学习困难</div>
        <div>时间管理</div>
        <div>专业选择</div>
        <div>社交问题</div>
        <div>就业压力</div>
      </div>
    </div>
    <div class="more-screening">
      <div class="screening">高级筛选</div>
      <div class="more">
        展开更多
      </div>
    </div>
    <div class="line"></div>
    <div class="reset-confirmation">
      <div class="reset">重置</div>
      <div class="confirmation">发起聊天</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  flex: 1;
  height: calc(100vh - 44px);
  padding: 40px 20px;
  color: #fff;
  background: #94BCFB;
  display: flex;
  flex-direction: column;
}

.content .servic > p, .content .topic > p {
  color: white;
  margin-bottom: 10px;
}

.content .servic > div, .content .topic > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-row-gap: 20px;
}

.content .servic > div > div, .content .topic > div > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background: #AFC8F4;
  border-radius: 6px;
}

.content .servic > div > div:nth-child(1), .content .topic > div > div:nth-child(1) {
  color: #cf8eff;
}

.content .servic {
  margin-bottom: 60px;
}

.content .more-screening {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
}

.content .more {
  color: white;
}

.content .line {
  border-bottom: 1px solid #fff;
  margin-bottom: 10px;
  margin-top: 16px;
}

.content .screening {
  color: white;
}

.content .reset-confirmation {
  display: flex;
  height: 60px;
  line-height: 60px;
  margin-top: 20px;
}

.content .reset-confirmation > div {
  margin-left: 10px;
  font-size: 20px;
  flex: 1;
  color: #fff;
  text-align: center;
  background: #AFC8F4;
}

</style>